import { MenuComponent } from './menu.component';
import { Component, OnInit, Input, TemplateRef, ContentChild } from '@angular/core';
import { dropAnimation } from '../shared/animation/index';
@Component({
  selector: 'el-submenu',
  animations: [dropAnimation],
  templateUrl: './submenu.component.html',
  
})
export class SubmenuComponent implements OnInit {
  rootMenu!: MenuComponent;
  @ContentChild('titleTmp') titleTmp!: TemplateRef<any>;
  @Input() index: string = '';
  @Input() title: string = '';
  timer: any;
  opened: boolean = false;
  active: boolean = false;
  subActive: boolean = false;
  dontUserHover: boolean = false;
  constructor(rootMenu: MenuComponent) {
    this.rootMenu = rootMenu;
  }

  ngOnInit(): void {
    this.updateOpened();
    this.active = this.index === this.rootMenu.model;
    this.dontUserHover = this.rootMenu.mode === 'vertical' || this.rootMenu.menuTrigger !== 'hover';
  }


  mouseenterHandle() {
    var _this = this;
    this.active = true;
    if (this.dontUserHover)
      return;
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
      _this.rootMenu.openMenu(_this.index);
      _this.updateOpened();
      clearTimeout(_this.timer);
    }, 300);
  }


  mouseleaveHandle() {
    var _this = this;
    this.active = false;
    if (this.dontUserHover)
      return;
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
      _this.rootMenu.closeMenu(_this.index);
      _this.updateOpened();
      clearTimeout(_this.timer);
    }, 300);
  }


  selectHandle(path: any) {
    this.rootMenu.selectHandle(this.index, path);
    // selected and close list
    if (this.rootMenu.mode !== 'vertical') {
      this.rootMenu.closeMenu(this.index);
    }
    this.updateOpened();
  }

  updateOpened() {
    this.opened = this.rootMenu.openedMenus.indexOf(this.index) > -1;
  }

  clickHandle() {
    if (!this.dontUserHover)
      return;
    if (this.opened) {
      this.rootMenu.closeMenu(this.index);
    }
    else {
      this.rootMenu.openMenu(this.index);
    }
    this.updateOpened();
  }

  borderColor() {
    return this.rootMenu.showBorderIndex === this.index ?
      (this.rootMenu.activeTextColor ? this.rootMenu.activeTextColor : '#409eff')
      : 'transparent';
  }
}
